import './Scss/FileApproval.scss'
import { TitleSmall002 } from '../Common/SmallTitle'
import { useRequest, useSize } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { useEffect, useRef, useState } from 'react'
import { Column } from '@ant-design/plots'
import { FrontModalBox } from '../Modal'

export const FileApproval001 = () => {
    const BoxRef = useRef()
    const size = useSize(BoxRef)

    const [DataOne, setDataOne] = useState()
    const [DataTwo, setDataTwo] = useState()

    const { runAsync: getOne } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = []
            res.list.forEach(({ tableName, approvalStatus, formCount }) => {
                data = [
                    ...data,
                    { name: '审批中', tableName, value: approvalStatus },
                    { name: '审批通过', tableName, value: formCount },
                ]
            })
            setDataOne(data)
        },
    })
    const { runAsync: getTwo } = useRequest(Http, {
        manual: true,
        onSuccess: res => setDataTwo(res.list),
    })

    useEffect(() => {
        getOne({ url: 'getHomeFormInfoByOrg' })
        getTwo({ url: 'getHomeFormInfoByYearMonth2' })
    }, [getOne, getTwo])

    const [FrontOptionsCall, setFrontOptionsCall] = useState()

    const configOne = (size, data) => {
        const { height } = size
        return {
            autoFit: false,
            height: height - 48,
            maxColumnWidth: 14,
            appendPadding: 24,
            data,
            isGroup: true,
            xField: 'tableName',
            yField: 'value',
            seriesField: 'name',
            color: [
                'l(90) 0:rgba(255, 246, 177, 1) 1:rgba(255, 246, 177, 0.2)',
                'l(90) 0:rgba(0, 183, 142, 1) 1:rgba(0, 183, 142, 0.2)',
            ],
            legend: {
                layout: 'horizontal',
                position: 'top-right',
                offsetY: 24,
                itemName: { style: { fill: '#B2FBFD', fontSize: 12 } },
            },
            xAxis: {
                label: { style: { fill: '#B2FBFD' } },
                line: { style: { stroke: '#B2FBFD' } },
                tickLine: { style: { stroke: '#B2FBFD' } },
            },
            yAxis: {
                title: { text: '', position: 'end', autoRotate: false, offset: 50, style: { fill: '#B2FBFD' } },
                tickCount: 5,
                label: { style: { fill: '#B2FBFD' } },
                grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
            },
            meta: {
                approvalStatus: { alias: '类别' },
                formCount: { alias: '数量' },
            },
        }
    }

    const configTwo = (size, data) => {
        const { height } = size
        return {
            data,
            autoFit: false,
            height: height - 48,
            maxColumnWidth: 14,
            appendPadding: 24,
            xField: 'eventDate',
            yField: 'formCount',
            color: 'l(90) 0:rgba(255, 246, 177, 1) 1:rgba(255, 246, 177, 0.2)',
            xAxis: {
                label: { style: { fill: '#B2FBFD' } },
                line: { style: { stroke: '#B2FBFD' } },
                tickLine: { style: { stroke: '#B2FBFD' } },
            },
            yAxis: {
                title: { text: '', position: 'end', autoRotate: false, offset: 50, style: { fill: '#B2FBFD' } },
                tickCount: 5,
                label: { style: { fill: '#B2FBFD' } },
                grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
            },
            meta: {
                eventDate: { alias: '类别' },
                formCount: { alias: '数量' },
            },
        }
    }

    return (
        <div className="FileApproval001" ref={BoxRef}>
            <div className="Left" style={{ marginRight: 16 }}>
                <TitleSmall002 title="按标段统计" />
                {size && DataOne && (
                    <div className="DataTwo">
                        <Column {...configOne(size, DataOne)} />
                    </div>
                )}
            </div>
            <div className="Right">
                <TitleSmall002 title="按月统计" />
                {size && DataTwo && (
                    <div className="DataTwo">
                        <Column
                            {...configTwo(size, DataTwo)}
                            onReady={plot =>
                                plot.on('plot:click', e => {
                                    setFrontOptionsCall({
                                        type: 'TableList',
                                        data: {
                                            title: '审批详情',
                                            type: 'DocumentApproval',
                                        },
                                    })
                                })
                            }
                        />
                    </div>
                )}
            </div>
            <FrontModalBox OptionsCall={FrontOptionsCall} />
        </div>
    )
}
